<template>
	<mui-button-base class="_mui-base-in-button" :appParameter="appParameter" component="button"
		:centerRipple="(shape === 'circle' && variant === 'text')" :disabled="disabled || loading"
		:disableRipple="disableRipple"
		:hoverClass="(disabled || loading) ? '' : (hoverClass ? hoverClass : 'mui-button-hover')"
		:hoverStopPropagation="hoverStopPropagation" :hoverStartTime="hoverStartTime" :hoverStayTime="hoverStayTime"
		:mClass="'mui-button disable-elevation-'+disableElevation+' mui-shape-'+shape+' '+muiClasses"
		:mStyle="(fullWidth ? 'width: 100%;' : '') + _groupStyle+mStyle" :formType="formType" :lang="lang"
		:openType="openType" :rippleColor="rippleColor" :sendMessageTitle="sendMessageTitle"
		:sendMessagePath="sendMessagePath" :sendMessageImg="sendMessageImg" :sessionFrom="sessionFrom"
		:showMessageCard="showMessageCard">
		<slot />
		<mui-icon v-if="loading || icon" :color="iconColor || icon.color"
			:name="loading ? 'loading' : (icon.name || icon)"
			:mClass="'icon-in-button icon-position-'+(iconPosition || icon.position)+' '+(loading ? 'mui-button-loading' : '')+' '+(icon.class || '')"
			:mStyle="icon.style || ''" :size="iconSize || icon.size" :spin="loading || iconSpin || icon.spin" />
		<slot v-else name="icon" />
	</mui-button-base>
</template>

<script>
	var openTypeMap = {
		contact: 'contact',
		getPhoneNumber: 'getphonenumber',
		getUserInfo: 'getuserinfo',
		defaultenSetting: 'opensetting',
		launchApp: 'launchapp'
	};
	var styleProps = ['color', 'variant', 'size'];
	export default {
		name: "mui-button",
		methods: {
			_ReRenderControlledProps: function _ReRenderControlledProps() {
				var _this = this;
				var target = this._buttonGrouplComp;
				if (target && Array.isArray(controlledProps)) {
					var newData = {};
					controlledProps.forEach(function(item) {
						if (!_this._propIsSet || !_this._propIsSet[item]) {
							newData[item] = target.data[item];
						}
					});
					if (Object.keys(newData).length > 0) {
						this.setData(newData);
					}
				}
			},
			_TriggerRipple: function _TriggerRipple(e) {
				var buttonBase = uni.createSelectorQuery().in(this).selectComponent('._mui-base-in-button');
				if (buttonBase) {
					buttonBase._RippleAction(e);
				}
			},
			_defindMuiBehaviors: function _defindMuiBehaviors() {
				var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
				/** 整合所有样式 */
				var muiClassesArr = [];
				styleProps.forEach(function(sp) {
					muiClassesArr.push(params[sp] ? 'mui-' + sp + '-' + params[sp] : '');
				});
				if (params.mClass) {
					muiClassesArr.push(params.mClass);
				}
				var muiClasses = muiClassesArr.join(' ');
				this.$data.muiClasses = muiClasses;
				//this.$set(this.$data, 'muiClasses', newData.muiClasses);
				//this.$data=newData;
			}
		},
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			appParameter: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'default'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			disableElevation: {
				type: Boolean,
				default: false
			},
			disableRipple: {
				type: Boolean,
				default: false
			},
			formType: {
				type: String,
				default: ''
			},
			fullWidth: {
				type: Boolean,
				default: false
			},
			hoverClass: {
				type: String,
				default: ''
			},
			hoverStopPropagation: {
				type: Boolean,
				default: false
			},
			hoverStartTime: {
				type: Number,
				default: 20
			},
			hoverStayTime: {
				type: Number,
				default: 70
			},
			icon: {
				type: String,
				optionalTypes: [Object],
				default: null
			},
			iconSize: {
				type: Number,
				default: null
			},
			iconColor: {
				type: String,
				default: null
			},
			iconPosition: {
				type: String,
				default: 'left'
			},
			iconSpin: {
				type: Boolean,
				default: false
			},
			lang: {
				type: String,
				default: 'en'
			},
			loading: {
				type: Boolean,
				default: false
			},
			openType: {
				type: String,
				default: ''
			},
			rippleColor: {
				type: String,
				default: ''
			},
			sendMessageTitle: {
				type: String,
				default: ''
			},
			sendMessagePath: {
				type: String,
				default: ''
			},
			sendMessageImg: {
				type: String,
				default: ''
			},
			sessionFrom: {
				type: String,
				default: ''
			},
			shape: {
				type: String,
				default: 'normal'
			},
			showMessageCard: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: 'medium'
			},
			variant: {
				type: String,
				default: 'text'
			},
		},
		data() {
			return {
				_groupStyle: '',
				muiClasses: '',
			};
		},
		mounted() {
			this._hasAttached = true;
		},
		computed: {
			params() {
				const {
					color,
					variant,
					size,
					mClass
				} = this;
				return {
					color,
					variant,
					size,
					mClass,
				}
			}
		},
		watch: {
			params: {
				handler(val) {
					this._firstOberverForMuiClass = true;
					this._defindMuiBehaviors(val)
				},
				immediate: true,
			}
		}
	}
</script>

<style>

</style>